<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/sockjs.js"></script>
<script type="text/javascript">
   let websocket =null;
   if('WebSocke' in  window){
       console.log("websocket");
       websocket = new WebSocket("ws://localhost:8080/websocket/socketServer");
   }else{
       console.log("sockjs");
       websocket = new SockJS("http://localhost:8080/sockjs/socketServer");
   }
   websocket.onmessage=function (event) {
       $("#tx1").append(event.data+"\n");
   }
   
   function send() {
       websocket.send($("#tx2").val());
       $("#tx2").val("");
   }
</script>
</head>
<body>
<body class="easyui-layout" style="width: 800px;height: 600px">
    <div data-options="region:'center',title:'聊天窗口'" style="padding:5px;">
       <table>
          <tr>
            <td>
               <textarea rows="25" cols="80" id="tx1" readonly="readonly"></textarea>
            </td>
          </tr>
          <tr>
            <td>
               <textarea rows="8" cols="80" id="tx2"></textarea>
            </td>
          </tr>
          <tr>
            <td align="right">
               <button type="button" onclick="send()">发送</button>
            </td>
          </tr>
       </table>  
    </div>   
</body>
</body>
</html>